<template>
  <section class="home">
    <div class="bg"></div>
    <div class="bottom-icons">
      <router-link class="icon-wrap" :to="{ name: 'Query', query: { type: '求姻缘' } }" aria-label="求姻缘">
        <img class="icon" src="/images/btn.png" alt="求姻缘" />
        <span class="label">求姻缘</span>
      </router-link>
      <router-link class="icon-wrap" :to="{ name: 'Query', query: { type: '问事业' } }" aria-label="问事业">
        <img class="icon" src="/images/btn.png" alt="问事业" />
        <span class="label">问事业</span>
      </router-link>
      <router-link class="icon-wrap" :to="{ name: 'Query', query: { type: '找财源' } }" aria-label="找财源">
        <img class="icon" src="/images/btn.png" alt="找财源" />
        <span class="label">找财源</span>
      </router-link>
      <router-link class="icon-wrap" :to="{ name: 'Query', query: { type: '查健康' } }" aria-label="查健康">
        <img class="icon" src="/images/btn.png" alt="查健康" />
        <span class="label">查健康</span>
      </router-link>
    </div>
  </section>
  
</template>

<style scoped>
.home {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}
.bg {
  position: fixed;
  inset: 0;
  background-image: url('/images/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.02);
  opacity: 0.98;
}

.bottom-icons {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(64px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
  padding: 0 12px;
  gap: 8px;
}
.icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.icon {
  width: 100%;
  /* 基于视口宽度计算：去除左右内边距与间距后按4等分 */
  max-width: min(calc((100vw - 24px - 3 * 8px) / 4), 128px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(2,32,71,.25));
}
.label {
  font-size: 20px;
  line-height: 30px;
  position: absolute;
  color: #000;
  font-weight: 700;
  /* 竖排文字 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* 毛笔字体（优先使用在线字体，回退到楷体）*/
  font-family: 'Ma Shan Zheng','Zhi Mang Xing','Long Cang','KaiTi','STKaiti','SimSun',sans-serif;
  /* 居中 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

@media (min-width: 768px) {
  .icon { max-width: min(calc((100vw - 24px - 3 * 16px) / 4), 160px); }
  .bottom-icons { gap: 16px; padding: 0 16px; bottom: 96px; }
}

/* 覆盖模板的全局居中与内边距，确保该页满屏显示 */
:global(body) {
  display: block;
  min-height: 100svh;
}
:global(#app) {
  max-width: none;
  padding: 0;
  text-align: initial;
}
</style>